<template><!--得失分记录-->
  <div id="test">
    <!--//type 1.攻击得分、2.防守失分、3.异常失分、4.异常得分、5.防守得分-->
    <!--<div v-if="sceneType == 0">
      <div style="background: rgb(231, 231, 241);padding:10px;margin-top:10px;" v-if="type == 1"> 
                      攻击得分总次数 <Tag color="purple">{{scoreTotalStatics.total}}</Tag>
              攻击总得分 <Tag color="purple">{{scoreTotalStatics.totalScore}}</Tag>
        <Button type="primary" @click="getAwdDrillScoreDetail" style="margin-left:20px">攻击详情</Button>
      </div>
      <div style="background: rgb(231, 231, 241);padding:10px;margin-top:10px;" v-if="type == 5">
              防守得分总次数 <Tag color="purple">{{scoreTotalStatics.total}}</Tag>
              防守总得分 <Tag color="purple">{{scoreTotalStatics.totalScore}}</Tag>
        <Button type="primary"  @click="getAwdDrillScoreDetail" style="margin-left:20px">防守详情</Button>
      </div>
      <div style="background: rgb(231, 231, 241);padding:10px;margin-top:10px;" v-if="type == 4">
              异常得分总次数 <Tag color="purple">{{scoreTotalStatics.total}}</Tag>
              异常总得分 <Tag color="purple">{{scoreTotalStatics.totalScore}}</Tag>
        <Button type="primary"  @click="getAwdDrillScoreDetail" style="margin-left:20px">异常详情</Button>
      </div>
    </div>-->
    <table-body :options="initObj"></table-body>
    <Modal v-model="scoreDetailModal.show"
      :title="scoreDetailModal.title"
      width="1200"
      :mask-closable = "false"
      footer-hide>
      <Row class="targetHeader">
        <Input v-model.trim="queryScoreDetailInfo.targetName"  placeholder="请输入目标名称" 
          style="width: 180px;margin-right:15px;"  clearable @on-change="changeScoreDetailPage(1)"  />
        <Input v-model.trim="queryScoreDetailInfo.sourceName" :placeholder="'请输入'+ detailTeamText" style="width: 180px;margin-right:15px;"
          clearable @on-change="changeScoreDetailPage(1)"  v-if="type == 1 && ![8, 9].includes(sceneType)"/>
        <Input v-model.trim="queryScoreDetailInfo.number" v-if="sceneType !== 9" placeholder="请输入周期数" style="width: 180px;margin-right:15px;" 
          clearable @on-change="setNumber"  />
        <Page :total="scoreDetailInfoTotal"
          :page-size="queryScoreDetailInfo.pageSize"
          show-total show-elevator :current="queryScoreDetailInfo.pageIndex"
          @on-change="changeScoreDetailPage" style="float: right" v-if="scoreDetailInfoTotal > 0">
        </Page>
      </Row>
      <TableList :columns="scoreDetailInfoColumn" :data="scoreDetailInfoList"></TableList>
    </Modal>
  </div>
</template>
<script>
//	import Cookies from 'js-cookie'
import {adcTeamScoreStatis,teamScoreStatis,getAwdPlusScore} from '@/api/compitionStatic'
import tableBody from './tableListComponent'
import groupMixin from "@/mixin/groupMixin";
import { formatSeconds } from '@/libs/utils'
export default {
  name: 'scenes',
  props:['sceneType','type','poll'],//type 1.攻击得分、2.防守失分、3.异常失分、4.异常得分、5.防守得分
  mixins: [groupMixin],
  data(){
    const n = function(val){
      this.selNumber = val;
      if(isNaN(Number(this.selNumber))){
        this.$Message.warning('周期请输入数字');
        return
      }
      this.getAbnormalScore();
    }.bind(this);
    const setNumber = function(val){
      this.selNumber = val.currentTarget.value;
      if(isNaN(Number(this.selNumber))){
          this.$Message.warning('周期请输入数字');
      }
    }.bind(this);
    let teamText,scoreTimeText,scoreText,numberText,detailTeamText;
    if(this.type == 4 || this.type == 1 || this.type == 5 || this.type == 6){//1.攻击得分、2.防守失分、3.异常失分、4.异常得分、5.防守得分
      numberText = '得分周期'
      scoreText = '得分'
    }else{
      numberText = '失分周期',
      scoreText = '失分'
    }
    if(this.type == 1){
      teamText = '攻击团队'
      scoreTimeText = '攻击成功次数'
      detailTeamText = '被攻击团队名称'
    }else if(this.type == 2){
      teamText = '防守团队'
      scoreTimeText = '防守失败次数'
      detailTeamText = '成功攻击团队名称'
    }else{
      teamText = '团队名称'
      if(this.type == 4){
        scoreTimeText = `${this.sceneType === 9 ? '额外' : '异常'}得分次数`
        detailTeamText = this.sceneType === 1 ? '失分团队名称' : '得分团队名称'
      }else if(this.type == 3){
        scoreTimeText = `${this.sceneType === 9 ? '额外' : '异常'}失分次数`
        detailTeamText = this.sceneType === 1 ? '得分团队名称' : '失分团队名称'
      }else if(this.type == 5){
        scoreTimeText = `${this.sceneType === 9 ? '运维' : '防守'}得分次数`
        detailTeamText = '得分团队名称'
      }else if(this.type == 7){
        scoreTimeText = '重置次数'
        detailTeamText = '失分团队名称'
      }
    }
    return {
      currentTeamId: '',
      detailTeamText:detailTeamText,
      initObj:{
        Button:[
        ],
        Input:[
        ],
        Select:[
          {
            optionsValue: [],
            placeholder: `请选择${teamText}`,
            fnName: this.getAbnormalScoreById
          }
        ],
        DatePicker:{
          isShow:false,
//            fnName:d,
        },
        Page:{
          total:0,
          currentPage:1,
          pageSize:10
        },
        Table:{
          listCol:[
            {
              title:teamText,
              key:'teamName',
              align:'center',
              ellipsis:true,
              tooltip:true,
              width:100,
              placement:'top-left',
              order:1
            },
            {
              title:scoreTimeText,
              key:'oneCount',
              align:'center',
              tooltip:true,
              width:60,
              placement:'top-left',
              order:2
            },
            {
              title:scoreText,
              key:'oneScore',
              align:'center',
              tooltip:true,
              width:60,
              placement:'top-left',
              order:3
            },
            {
              title:'攻击方式',
              key:'attackType',
              show:() => {
                return this.sceneType === 8 && this.type === 1 && this.showAttackAndFix
              }
            },
            {
              title:'修复方式',
              key:'fixType',
              show:() => {
                return this.sceneType === 8 && this.type === 5 && this.showAttackAndFix
              },
            },
            {
              title:'修复时长',
              key:'fixTime',
              show:() => {
                return this.sceneType === 8 && this.type === 5 && this.showAttackAndFix
              },
              filter:(fixTime) => formatSeconds(fixTime/1000)
            },
            {
              title:'操作',
              key:'action',
              placement:'top-right',
              opList:[{
                txt:scoreText+'详情',
                on:{
                  click:(data)=>{//4
                    this.queryScoreDetailInfo = {
                      pageSize:10,
                      pageIndex:1,
                      sceneId:this.$route.query.id,
                      scoreType:this.type,
                      targetName:'',
                      teamId:''
                    };
                    this.getScoreDetail(data.teamId);
                  }
                }
              }],
              // render:(h,params) => {
              //   return h('div',[
              //     h('Button',{
              //       props:{
              //         type:'primary',
              //         size:'small',
              //       },
              //       style:{
              //         marginRight:'5px'
              //       },
              //       on:{
              //         click:()=>{//4
              //           this.queryScoreDetailInfo = {
              //             pageSize:10,
              //             pageIndex:1,
              //             sceneId:this.$route.query.id,
              //             scoreType:this.type,
              //             targetName:'',
              //             teamId:''
              //           };
              //           this.getScoreDetail(params.row.teamId);
              //         }
              //       }
              //     },scoreText+'详情'),
              //   ])
              // }
            },
          ],
          listData:[]
        },
        Fnlist:'getAbnormalScore',
      },
      selName:'',
      gameboxName:'',
      timeout:{},
      selNumber:'',
      sourceName:'',
      //得分统计
      scoreTotalStatics:{},
      //得分详情
      queryScoreDetailInfo:{
        pageSize:10,
        pageIndex:1,
        sceneId:this.$route.query.id,
        scoreType:this.type,
        targetName:'',
        teamId:''
      },
      scoreDetailInfoTotal:0,
      scoreDetailInfoList:[],
      scoreDetailInfoColumn:[
        {
          title:'目标名称',
          key:'targetName',
          placement:'top-left',
          width:150,
          tooltip:true,
        },
        {
          title:detailTeamText,
          key:'sourceName',
          align:'center',
          ellipsis:true,
          tooltip:true,
          placement:'top-left',
          width:100,
        },
        {
          title:numberText,
          key:'number',
          align:'center',
          ellipsis:true,
          width:130,
          render:(h,params) => {
            return h('span',params.row.number ? `第${params.row.number}周期` : '无')
          }
        },
        {
          title:'周期开始时间',
          key:'startTime',
          align:'center',
          ellipsis:true,
          tooltip:true,
          width:180,
          render:(h,params)=>{
            return h('span', params.row.startTime||'无')
          }
        },
        {
          title:'周期结束时间',
          key:'nextStartTime',
          align:'center',
          ellipsis:true,
          tooltip:true,
          width:180,
          render:(h,params)=>{
            return h('span', params.row.nextStartTime||'无')
          }
        },
        {
          title:scoreText,
          key:'score',
          placement:'top-left'
        }
      ],
      scoreDetailModal:{
        show:false,
        loading:true,
        title:'攻击详情'
      },
      showAttackAndFix:false
    }
  },
  inject: ['detailParent'],
  components:{
    'table-body':tableBody
  },
  computed:{
      scoringType() {//0  混合计分模式  1单独计分模式
          console.log(this.detailParent)
          return this.detailParent.scoringType || 0;
      }
  },
  watch:{
    teamList(newValue) {
      this.initObj.Select[0].optionsValue = newValue
    }
  },
  beforeDestroy(){
    clearTimeout(this.timeout)
  },
  created(){
  },
  mounted(){
    clearTimeout(this.timeout)
    this.getAbnormalScore();
    if (this.sceneType === 8) {
      let index = this.scoreDetailInfoColumn.findIndex(item => item.key === 'sourceName')
      if (index !== -1) {
        this.scoreDetailInfoColumn.splice(index, 1)
      }
      if(this.type === 5 || this.type === 1){
        this.$store.dispatch('common/getSysConfigShow','AWDPConfig').then(data => {
            this.showAttackAndFix = data
        })
      }
    }
    if (this.sceneType === 8 && this.scoringType === 0 && this.type == 5) {
      let index = this.scoreDetailInfoColumn.findIndex(item => item.key === 'number')
      if (index !== -1) {
        this.scoreDetailInfoColumn.splice(index, 1, {
          title:'得分周期',
          key:'number',
          align:'center',
          ellipsis:true,
          width:130,
          render:(h,params) => {
            let number = params.row.verifyInfo && params.row.verifyInfo.number
            return h('span',number ? `第${number}周期` : '无')
          }
        })
      }
      index = this.scoreDetailInfoColumn.findIndex(item => item.key === 'startTime')
      if (index !== -1) {
        this.scoreDetailInfoColumn.splice(index, 1, {
          title:'周期开始时间',
          key:'startTime',
          align:'center',
          ellipsis:true,
          tooltip:true,
          width:180,
          render:(h,params)=>{
            let startTime = params.row.verifyInfo && params.row.verifyInfo.startTime
            return h('span', startTime||'无')
          }
        })
      }
      index = this.scoreDetailInfoColumn.findIndex(item => item.key === 'nextStartTime')
      if (index !== -1) {
        this.scoreDetailInfoColumn.splice(index, 1, {
          title:'周期结束时间',
          key:'nextStartTime',
          align:'center',
          ellipsis:true,
          tooltip:true,
          width:180,
          render:(h,params)=>{
            let nextStartTime = params.row.verifyInfo && params.row.verifyInfo.nextStartTime
            return h('span', nextStartTime||'无')
          }
        })
      }
    }
    if (this.sceneType === 9) {
      let index = this.scoreDetailInfoColumn.findIndex(item => item.key === 'number')
      if (index !== -1) {
          this.scoreDetailInfoColumn.splice(index, 1)
      }
      index = this.scoreDetailInfoColumn.findIndex(item => item.key === 'sourceName')
      if (index !== -1) {
          this.scoreDetailInfoColumn.splice(index, 1)
      }
      index = this.scoreDetailInfoColumn.findIndex(item => item.key === 'startTime')
      if (index !== -1) {
          this.scoreDetailInfoColumn.splice(index, 1)
      }
      index = this.scoreDetailInfoColumn.findIndex(item => item.key === 'nextStartTime')
      if (index !== -1) {
          this.scoreDetailInfoColumn.splice(index, 1)
      }
    }
  },
  methods:{
    setNumber(val){
      if(val.currentTarget && val.currentTarget.value && isNaN(Number(val.currentTarget.value))){
        this.$Message.warning('周期请输入数字');
        return;
      }
      this.changeScoreDetailPage(1);
    },
    getScoreDetail(teamId){
      if (teamId) { // 选定了团队的情况下，保留当前选中的团队ID
          this.currentTeamId = teamId
      }
      if(this.type == 1){
        this.scoreDetailModal.title = '攻击得分详情'
      }else if(this.type == 2){
        this.scoreDetailModal.title = '防守失分详情'
      }else if(this.type == 4){
        this.scoreDetailModal.title = `${this.sceneType === 9 ? '额外' : '异常'}得分详情`
      }else if(this.type == 5){
        this.scoreDetailModal.title = `${this.sceneType === 9 ? '运维' : '防守'}得分详情`
      }else if(this.type == 3){
        this.scoreDetailModal.title = `${this.sceneType === 9 ? '额外' : '异常'}失分详情`
      }else if(this.type == 7){
        this.scoreDetailModal.title = '重置失分详情'
      }
      let params = JSON.parse(JSON.stringify(this.queryScoreDetailInfo));
      params.teamId = teamId || this.currentTeamId;
      if(!params.number){
        delete params.number;
      }
      if (this.sceneType === 8 && this.type == 5) {
        getAwdPlusScore(params).then(({ code, message, data = {} }) => {
          this.scoreDetailModal.show = true;
          if(code == 1){
            this.scoreDetailInfoTotal = data.total;
            this.scoreDetailInfoList = data.items;
          }else{
            this.scoreDetailInfoTotal = 0;
            this.scoreDetailInfoList = [];
            this.$Message.warning(message);
          }
        })
      } else {
        teamScoreStatis(params).then(data => {
          this.scoreDetailModal.show = true;
          if(data.code == 1){
            this.scoreDetailInfoTotal = data.data.total;
            this.scoreDetailInfoList = data.data.items;
          }else{
            this.scoreDetailInfoTotal = 0;
            this.scoreDetailInfoList = [];
            this.$Message.warning(data.message);
          }
        }).catch(() => {
        })
      }
    },
    changeScoreDetailPage(page){
      this.queryScoreDetailInfo.pageIndex = page;
      this.getScoreDetail();
    },
    getAbnormalScoreById(id) {
      this.selName = this.getTeamNameById(id);
      this.getAbnormalScore()
    },
    getAbnormalScore(page,pageSize,querytime){
      let _this = this;
      let pages = page || 1;
      this.$set(this.initObj.Page, 'currentPage', pages)
      let rows = pageSize||_this.PZ|| 10;
      let id = '';
      let params={
        pageIndex : pages,
        pageSize : rows
      };
      if(this.selName){
        params.teamName =  this.selName;
      }
      if(this.selNumber && !isNaN(Number(this.selNumber))){
        params.number = Number(this.selNumber);
      }else if(this.selNumber && isNaN(Number(this.selNumber))){
        //this.$Message.error('周期请输入数字');
      }
      if(this.gameboxName){
        params.targetName = this.gameboxName;
      }
      clearTimeout(this.timeout)
      adcTeamScoreStatis(this.$route.query.id,this.type,params).then(data=>{
        if(data.code==1){
          _this.scoreTotalStatics  = data.data;
          _this.initObj.Table.listData = data.data.items;
          _this.initObj.Page.total = data.data.total;
          if(this.poll){ //如果需要轮询
            this.timeout = setTimeout(() => {
              this.getAbnormalScore(page,pageSize);
            },3000)
          }
        }
      })
    },
    saveInfo(val){
    }
  },
}
</script>

<style>
  .drillsTable .ivu-poptip-body {
    text-align: left!important;
  }
  .scenesHeader{
    margin-bottom: 16px;
  }
  .drillTables{
    min-height: 300px;
  }
  .drillsTable.ivu-table-wrapper{
    overflow: inherit;
  }
</style>
<style scoped>
  .Titles{
    background: #eeeeee;
    margin: 16px auto;
    padding: 10px 0;
  }
  .targetHeader{
    /*padding: 10px;*/
    margin-bottom: 10px;
  }
</style>
